<template>
	<view>
		<!-- #ifdef H5 -->
		<uni-nav-bar left-icon="back" @clickLeft="back" :border="0" title="账号设置"></uni-nav-bar>
		<!-- #endif -->
		<view class="list">
			<view class="list_item">
				<view class="list_item_field">头像</view>
				<image class="list_item_img" :src="userInfo.avatarUrl || '../../static/avatar.png'"></image>
			</view>
			<view class="list_item" @click="update">
				<view class="list_item_field">更新资料</view>
				<van-icon class="list_item_icon" name="arrow" color="#9d9d9e" />
			</view>
			<view class="list_item">
				<view class="list_item_field">手机号</view>
				<van-icon class="list_item_icon" name="arrow" color="#9d9d9e" />
				<view class="list_item_text">{{ userInfo.phone }}</view>
			</view>
			<view class="list_item">
				<view class="list_item_field">邀请码</view>
				<van-icon class="list_item_icon" name="arrow" color="#9d9d9e" />
				<view class="list_item_text">{{ userInfo.uid }}</view>
			</view>
			<view class="list_item">
				<view class="list_item_field">注册时间</view>
				<view class="list_item_text">{{ userInfo.create_time | formatTime  }}</view>
			</view>
			<view class="list_item" @click="open">
				<view class="list_item_field">邀请好友</view>
				<view class="list_item_text"></view>
			</view>
			<view class="list_item" @click="goToCDK">
				<view class="list_item_field">CDK兑换</view>
				<view class="list_item_text"></view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="popup_item" @click="poster">海报分享</view>
				<view class="popup_item" style="position: relative;">
					<!-- #ifdef MP-WEIXIN -->
					<button class="popup_item_btn" open-type="share">立即邀请</button>
					<!-- #endif -->
					发送分享
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import Login from '../../utils/login.js';
import Route from '../../utils/route.js';
export default {
	data() {
		return {
			// 用户详情
			userInfo: {}
		};
	},
	onShareAppMessage(res) {
		return {
			title: '六折电影票！全国各大影院通用',
			path: '/pages/index/index?uid='+uni.getStorageSync('userInfo').uid,
			imageUrl: 'https://movie666.oss-cn-beijing.aliyuncs.com/share/2.png',
			success(res) {
				uni.showToast({
					title: '分享成功'
				});
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				});
			}
		};
	},
	onLoad() {},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo');
	},
	filters: {
		formatTime(timestamp) {
			var date = new Date(timestamp * 1000); //timestamp 为10位需*1000，timestamp 为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
			return Y + M + D + h + m;
		}
	},
	methods: {
		// 返回
		back() {
			uni.navigateBack();
		},
		// 邀请好友
		open() {
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs.popup.open('bottom');
		},
		// 跳转海报
		poster() {
			uni.navigateTo({
				url: '../poster/poster'
			});
		},
		// 更新资料
		async update() {
			this.helper.preventActive(async () => {
				uni.showLoading({
					title: '正在更新',
					mask: true
				});
				uni.getUserProfile({
					desc: '更新',
					success: async e => {
						let res = await Route.login_wechat_userinfo({
							openid: uni.getStorageSync('openid'),
							nickName: e.userInfo.nickName,
							avatarUrl: e.userInfo.avatarUrl,
							formType: 1,
							parent_id: this.parent_id || ''
						});
						uni.setStorageSync('userInfo', res.info);
						this.userInfo = res.info;
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						});
					},
					fail: res => {
						uni.hideLoading();
					}
				});
			});
		},
		// 跳转福利
		goToCDK(){
			uni.navigateTo({
				url:'../cdk/cdk'
			})
		},
	}
};
</script>

<style lang="scss">
.list {
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
	padding: 30rpx 0;
	&_item {
		padding: 10rpx 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 2rpx solid $template-line;
		&_field {
			font-size: 26rpx;
			font-weight: 900;
			margin-left: 30rpx;
		}
		&_img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
		&_icon {
			margin-right: 30rpx;
		}
		&_text {
			margin-right: 30rpx;
			font-size: 26rpx;
			color: #9d9d9e;
		}
	}
	&_item:nth-last-child(1) {
		border-bottom: 2rpx solid $template-line;
	}
}
.popup {
	background: #fff;
	padding: 10rpx 0;
	padding-bottom: 33rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	&_item {
		margin: 8rpx;
		height: 81rpx;
		line-height: 81rpx;
		width: 750rpx;
		text-align: center;
		&_btn{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 9;
			opacity: 0;
		}
	}
}
</style>
